<template>
  <div class="cart">
    <my-header title="购物车"></my-header>
    <div class="cart-content" v-for="(l, i) in carts" :key="i" ref="citem">
      <van-swipe-cell>
        <van-card :num="l.count" :title="l.name">
          <template #thumb>
            <div class="ciwrap">
              <van-field name="checkbox">
                <template #input>
                  <van-checkbox
                    v-model="l.checkbox"
                    shape="round"
                    @click="changeCheckbox(l.id, l.checkbox)"
                  />
                </template>
              </van-field>
              <img v-lazy="l.img" alt="图片" @click="gotoDetail(l.itemsId)" />
            </div>
          </template>
          <template #footer>
            <div class="pswrap">
              <span class="pxc"><b>¥</b> {{ l.price * l.count }}</span>
              <van-stepper
                v-model="l.count"
                button-size="20px"
                theme="round"
                @plus="plus(l.id, l.count, 'plus')"
                @minus="minus(l.id, l.count, 'minus')"
              />
            </div>
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delGood(l.id)" />
        </template>
      </van-swipe-cell>
    </div>

    <!-- <Cart-footer :changeAllCheckbox="changeAllCheckbox" :citems="citems"></Cart-footer> -->
    <footer>
      <div class="cfooter">
        <van-nav-bar>
          <template #left>
            <div class="left">
              <van-field name="checkbox">
                <template #input>
                  <van-checkbox
                    v-model="allCheckbox"
                    shape="round"
                    @click="changeAllCheckbox"
                  />
                </template>
              </van-field>
              <span>全选</span>
            </div>
          </template>
          <template #right>
            <div class="right">
              <p>
                <span>合计：</span>
                <span class="allTotal">￥ {{ allTotal }}</span>
              </p>
              <div class="settle" @click="gotoCart">结算({{ allCount }})</div>
            </div>
          </template>
        </van-nav-bar>
        <!-- <router-link :to="{ name: l.name }">
      </router-link> -->
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carts: [],
      //   全选
      allCheckbox: false,
      //   id数组
      idList: [],
      //   合计
      allTotal: 0,
      allCount: 0,
    };
  },
  methods: {
    // 根据商品ID跳转到登录页
    gotoDetail(itemsId){
      this.$router.push({name:'detail',query:{itemsId}})
    },
    gotoCart() {
      this.$router.push({ name: "order" });
    },
    //   改变单选状态
    async changeCheckbox(id, ccheckbox) {
      let res = await this.$ajax.changeCheckboxData(id, {
        checkbox: ccheckbox,
      });
      //   console.log(res);
      //   console.log(1);
      this.getCheckTotal();
      this.getCheckCount();
    },
    // 改变全选状态
    changeAllCheckbox() {
      this.idList.forEach((item) => {
        this.$ajax.changeCheckboxData(item, { checkbox: this.allCheckbox });
      });
      this.idList = [];
      //   console.log(this.idList);
      this.getCart();
    },
    //   获取购物车数据
    async getCart() {
      let res = await this.$ajax.getCartData({ phone: this.userInfo.phone });
      this.carts = res;
      this.carts.forEach((item) => {
        this.idList.push(item.id);
      });
      console.log(this.carts);
      //   console.log(this.idList);
      this.getCheckTotal();
      this.getCheckCount();
    },
    // 修改商品数量(+ -)
    plus(id, ccount, type) {
      //   console.log(id, ccount, type);
      this.changeCartCount(id, ccount, type);
    },
    minus(id, ccount, type) {
      //   console.log(id, ccount, type);
      this.changeCartCount(id, ccount, type);
    },
    // 修改商品数量
    async changeCartCount(id, ccount, type) {
      if (type == "plus") {
        await this.$ajax.changeCartCountData(id, { count: ccount + 1 });
      } else {
        if (ccount > 0) {
          await this.$ajax.changeCartCountData(id, { count: ccount - 1 });
        }
      }
      this.getCheckTotal();
      this.getCheckCount();
    },
    async getCheckTotal() {
      let res = await this.$ajax.getCheckEveryData({ checkbox: true });
      //   console.log(res);
      //   return res
      this.allTotal = 0;
      res.forEach((item) => {
        this.allTotal += item.count * item.price;
      });
      // console.log();
    },
    async getCheckCount() {
      let res = await this.$ajax.getCheckEveryData({ checkbox: true });
      this.allCount = res.length;
      //   console.log(res);
    },
    async delCart(id){
      let res = await this.$ajax.delCartData(id)
      this.getCart()
    },
    // 删除商品
    delGood(id){
      this.$dialog.confirm({
        title:"确定要删除吗",
        message:""
      })
      .then(()=>{
        this.delCart(id)
        this.$toast('删除成功')
      })
      .catch(()=>{
        this.$toast('取消删除')
      })
    }
  },
  mounted() {
    this.getCart();
  },
  computed: {
    // 获取勾选状态的商品的总价格 -- 合计
  },
};
</script>

<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
.cart {
  width: 100%;
  //   height: 100%;
  //   padding-bottom: 780px;
  padding-bottom: 100px;
  .cart-content {
    .ciwrap {
      display: flex;
      align-items: center;
      ::v-deep .van-cell.van-field {
        background-color: #fafafa;
        //   margin-right: 10px;
      }
      //   van-cell__value van-cell__value--alone van-field__value
      ::v-deep .van-cell__value {
        margin-left: -12px;
      }
      img {
        width: 80px;
        height: 80px;
      }
    }
    ::v-deep .van-card__content {
      margin-left: 27px;
    }
    .pswrap {
      display: flex;
      justify-content: space-between;
      .pxc {
        margin-left: 115px;
        font-size: 14px;
        color: #ff80aa;
        b {
          font-size: 12px;
        }
      }
    }
  }
  .cfooter {
    width: 100%;
    position: fixed;
    bottom: 44px;
    border-top: 8px solid #eee;
    height: 50px;
    font-weight: bold;
    z-index: 1000;
    background-color: #fff;
    .left {
      display: flex;
      align-items: center;
      color: peru;
      ::v-deep .van-cell.van-field {
        width: 40px;
        margin-left: -12px;
      }
      input {
        transform: scale(1.3);
      }
      span {
        margin-left: 10px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .settle {
        background: #d9d9d9;
        width: 60px;
        height: 30px;
        border-radius: 15px;
        color: #333;
        line-height: 30px;
      }
      .allTotal {
        color: #ff80aa;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
}
</style>